<%@page import="java.util.List"%>
<%@page import="vn.ac.c0910g.assignment.Entity.Faqs"%>
<%@page import="vn.ac.c0910g.assignment.DAO.FaqsDAO"%>
<html lang="en"><head>
	<meta charset="utf-8">
	<title>Dashboard I Admin Panel</title>
        <link rel="stylesheet" href="../resources/css/layout2.css" type="text/css" media="screen">
	<!--[if lt IE 9]>
	<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
        <script src="../resources/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script src="../resources/scripts/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
	<script src="../resources/scripts/hideshow.js" type="text/javascript"></script>
	<script src="../resources/scripts/jquery.tablesorter.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../resources/scripts/jquery.equalHeight.js"></script>
        <script type="text/javascript" src="../resources/scripts/faq.js"></script>
	<script type="text/javascript">
	$(document).ready(function()
    	{
      	  $(".tablesorter").tablesorter();
   	 }
	);
	$(document).ready(function() {

	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});

});
    </script>
    <script type="text/javascript">
    $(function(){
        $('.column').equalHeight();
    });
</script>
</head>
<%
    FaqsDAO fDAO = new FaqsDAO();
    List<Faqs> lstFAQ = fDAO.getAllFaqs();
%>
<body>
	<div id="header" style="background-color: black;height: 50px;margin-top: -15px;">
	<h1 class="site_title" style="background: black;font-weight: 400;color: white;"><a href="index.html" style="color: white;">Website Admin</a></h1>
	<h2 class="section_title" style="margin-left: 600px;margin-top: -30px;color: white;">Dashboard</h2>
        <div class="btn_view_site" style="margin-left: 1150px;margin-top: -50px;"><a href="../Home/index.jsp"> View Site </a></div>
	</div> <!-- end of header bar -->

	<div id="secondary_bar">
		<div class="user">
                    <%if(session.getAttribute("admin") != null){%>
			<p><%=session.getAttribute("admin")%></p>
			<a class="logout_user" title="Logout" id="btnOut">Logout</a>
                        <%}else{response.sendRedirect("login.jsp");%>
                    <%}%>
		</div>
		<div class="breadcrumbs_container">
			<div class="breadcrumbs"><a href="admin.jsp">Admin</a> <div class="breadcrumb_divider"></div> <a class="current">FAQs</a></div>
		</div>
	</div><!-- end of secondary bar -->

	<div id="sidebar" class="column" style="height:650px; ">
		<form class="quick_search">
			<input type="text" value="Quick Search" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
		</form>
		<hr>
		<h3>Content</h3>
		<ul class="toggle">
			<li class="icn_new_article"><a href="contactus.jsp">Contact Us</a></li>
			<li class="icn_edit_article"><a href="feedback.jsp">Feedback</a></li>
			<li class="icn_categories"><a href="faqs.jsp"><b>FAQs</b></a></li>
			<li class="icn_tags"><a href="project.jsp">Project</a></li>
		</ul>
		<h3>Members</h3>
		<ul class="toggle">
			<li class="icn_add_user"><a href="admin.jsp">Administrators</a></li>
			<li class="icn_view_users"><a href="users.jsp">Users</a></li>
		</ul>
		<h3>Product</h3>
		<ul class="toggle">
			<li class="icn_folder"><a href="service.jsp">Services</a></li>
			<li class="icn_photo"><a href="category.jsp">Category</a></li>
			<li class="icn_photo"><a href="order.jsp">Orders</a></li>
			<li class="icn_photo"><a href="orderdetail.jsp">Order Details</a></li>
                        <li class="icn_photo"><a href="payment.jsp">Payment</a></li>
                        <li class="icn_photo"><a href="paymentdetail.jsp">Payment Details</a></li>
		</ul>
		<h3>Administrators</h3>
		<ul class="toggle">
			<li class="icn_settings"><a href="#">Options</a></li>
			<li class="icn_security"><a href="#">Security</a></li>
			<li class="icn_jump_back"><a href="#">Logout</a></li>
		</ul>
	</div>

	<div id="main" class="column" style="height:650px; ">

		<h4 class="alert_info">FAQs Management</h4>
		<div class="module width_full">
		<div><h3 class="tabs_involved">FAQs Management</h3>
		</div>
		<div class="tab_container">
			<div id="tab1" class="tab_content" style="display: block; ">
			<table id="tblUser" class="tablesorter" cellspacing="0">
			<thead>
				<tr>
                                    <th class="header" style="font-size: 12px;display: none;">Id</th>
                                    <th class="header headerSortUp" style="font-size:12px;">Question</th>
                                    <th class="header" style="font-size: 12px;">Answer</th>
                                    <th class="header" style="font-size: 12px;">Action</th>
				</tr>
			</thead>
			<tbody>
                        <%for(Faqs f : lstFAQ){%>
                        <tr id="<%=lstFAQ.indexOf(f)%>">
                                <td style="display: none;"><%=f.getFaqsid()%></td>
    				<td><%=f.getQuestion()%></td>
    				<td><%=f.getAnswer()%></td>
    				<td>
                                    <input class="delForm" id="btnDel<%=lstFAQ.indexOf(f)%>" type="image" src="../resources/image/icn_trash.png" title="Trash">
                                </td>
			</tr>
                        <%}%>
                        </tbody>
			</table>
			</div><!-- end of #tab1 -->

		</div><!-- end of .tab_container -->

		</div><!-- end of content manager article -->
                <div id="deleteContainer" style="width:200px;height:127px;">
                    <div id="deleteForm">
                        <table style="margin-top:20px;">
                             <tr>
                                 <td colspan="2" style="font-size:15px;padding-left:10px;">Are you sure want to delete?</td>
                             </tr>
                             <tr>
                                 <td><button id="yesDel" style="margin-left:20px">Yes</button></td>
                                 <td><button id="noDel">No</button></td>
                             </tr>
                        </table>
                    </div>
                </div>
	</div>
</body></html>